<template>
    <Center>
        <div class="p-8" style="height: 100%;">
            <div class="text-gray-700 font-bold" v-if="path_list == '/songbook'">中文歌曲</div>
            <div class="text-gray-700 font-bold" v-if="path_list == '/songbook/en'">英文歌曲</div>
            <el-row class="mt-4">
                <el-col  :span="4" class="p-3 flex justify-center items-center pointer"
                    style="position: relative;" v-for="(item, index) in albumList" @click="onClick(item)">
                    <el-image :src="baseUrl + item.image" class="rounded" style="width:100px;height:100px;" />
                    <div class="center-text flex justify-center items-center text-white">{{item.title}}</div>
                </el-col>
            </el-row>
        </div>
    </Center>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { useRouter } from 'vue-router';
import { albumIndex} from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
const router = useRouter();
const page = ref(1);
const albumList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
const { currentRoute } = useRouter();
const route = currentRoute.value;
const path_list = ref();
const lang = ref();
onMounted(() => {
    path_list.value =  route.path;
    console.log(path_list.value);
    getAlbumList();    
});
const getAlbumList = async () => {
    if(path_list.value == '/songbook/en'){
        lang.value = 'en';
    }else if(path_list.value == '/songbook'){
        lang.value = 'cn';
    }
    const { data } = await albumIndex({
        lang:lang.value,
        page: page.value,
        limit: 36,
    });    
    albumList.value = data.album.data;   
};
const onClick = function (e) {
    console.log("跳转ID：",e.id)
    router.push(`/songbook/list?id=${e.id}`)
}
</script>
<style scoped>
.center-text {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>